section {
  display: flex;
  gap: 10px;

  > .left {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;

    .top {
      flex: 1;
      overflow: hidden;
    }

    .bottom {
      height: var(--index-module-height);
      display: flex;
      gap: 10px;

      .left {
        width: var(--index-module-width);;
      }

      .right {
        flex: 1;
        overflow: hidden;
      }
    }

  }

  .mid {
    width: var(--index-module-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .top {
      height: var(--index-module-height);
    }

    .mid{
      height:calc((100vh - 60px - var(--index-module-height) - 30px) / 3);
    }

    .bottom {
      flex: 1;
      overflow: hidden;
    }
  }

  > .right {
    width: var(--index-module-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .top {
      height: var(--index-module-height);
    }

    .mid{
      height:calc((100vh - 60px - var(--index-module-height) - 30px) / 3);
    }
    .bottom{
      height:calc((100vh - 60px - var(--index-module-height) - 30px) / 3)
    }
    .bottom {
      flex: 1;
      overflow: hidden;
    }
  }
}




